import styles from './index.less';

export default function CarouselT(props: any) {
  const { influentCondition, tailWaterCondition, changeCarouse, children } =
    props;
  return (
    <div className={`${styles.carouselContainer} bgColor`}>
      <div>
        <div className={styles.carouselLi}>
          <div className={styles.carouselLiCon}>
            <div className={styles.block}>
              <img src={require('@/assets/jpspic.png')} />
              <div className={styles.detail}>
                <div>
                  {influentCondition?.waterInflow}
                  <span>m³/h</span>
                </div>
                <span>进水量</span>
              </div>
            </div>

            <div className={styles.block}>
              <img src={require('@/assets/jpspic2.png')} />
              <div className={styles.detail}>
                <div style={{ color: '#EA9808' }}>
                  {influentCondition?.temperature}℃
                </div>
                <span>温度</span>
              </div>
            </div>
            <div className={styles.block}>
              <img src={require('@/assets/jpspic2.png')} />
              <div className={styles.detail}>
                <div style={{ color: '#EA9808' }}>
                  {influentCondition?.waterLevel}m
                </div>
                <span>水位</span>
              </div>
            </div>
            <div className={styles.block}>
              <img src={require('@/assets/jpspic3.png')} />
              <div className={styles.detail}>
                <div>
                  {influentCondition?.waterStatus == 1 ? '开启' : '自流'}
                </div>
                <span>状态</span>
              </div>
            </div>
            <div className={styles.block}>
              <img src={require('@/assets/jpspic4.png')} />
              <div className={styles.detail}>
                <div>
                  {influentCondition?.dissolvedOxygen}
                  <span>mg/l</span>
                </div>
                <span>溶氧</span>
              </div>
            </div>
            <div className={styles.block}>
              <img src={require('@/assets/jpspic6.png')} />
              <div className={styles.detail}>
                <div>{influentCondition?.phValue}</div>
                <span>PH</span>
              </div>
            </div>
            <div className={styles.block}>
              <img src={require('@/assets/jpspic7.png')} />
              <div className={styles.detail}>
                <div>
                  {influentCondition?.tuibidity}
                  <span>NTU</span>
                </div>
                <span>浊度</span>
              </div>
            </div>
            <div className={styles.block}>
              <img src={require('@/assets/jpspic8.png')} />
              <div className={styles.detail}>
                <div style={{ color: '#EA9808' }}>
                  {influentCondition?.orpValue}mv
                </div>
                <span>ORP</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
